<template>
	<div class="message">
		<ul class="pl30rem pr30rem" v-if="flag">
			<li class="pt30rem" v-for="item in data">
				<p class="align-center fs30rem w100 pt30rem pb30rem"><span class="bg-bf pl10rem pr10rem white circle-8">{{ item.create_time*1000,'yyyy-MM-dd hh:mm:ss' | formatDate }}</span></p>
				<div class='bg-white pl30rem pr30rem pt10rem pb10rem'>
					<p class="pt20rem pb20rem fs28rem">系统消息</p>
					<p class="fs26rem ellipsis-more" style="height:2.5rem">{{ item.msg }}</p>
				</div>
			</li>
		</ul>
		<template v-else>
			<default :imgUrl="img" explain='暂无消息'></default>
		</template>
	</div>
</template>

<script>
import { getNews } from "@/api/member";
import { formatDate } from '@/utils';
import Default from "@/components/Default";	
	export default{
		components:
		{
			Default
		},
		data()
		{
			return {
				data       : [],
				uid        : window.localStorage.getItem('uid'),
				page_index : 1,
				page_size  : 10,
				flag       : false,	
				img        : require('../../../assets/icon-goods2.png')
			}
		},
		filters:
		{
			formatDate(time,fmt){
				let date = new Date(time);
				return formatDate(date,fmt);
			}  
		},
		created()
		{
			this.loadData();
		},
		methods:
		{
			loadData()
			{
				var params = {
					uid        : this.uid,
					page_index : this.page_index++,
					page_size  : this.page_size

				}
				getNews(params).then( res => {
					this.data = res.data;
					if(this.data.length > 0)
						this.flag = true;
					else
						this.flag = false;
				})
			}
		}
	}
</script>

<style lang="less">
	.message{
		background: #f5f5f5;
	}
</style>